<template>
  <div class="min-h-[860px] relative">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="告警信息" name="1">
        <alarminformation v-if="activeName == '1'" :formInline="formInline" />
      </el-tab-pane>
      <el-tab-pane label="监控视频" name="2">
        <surveillanceVideo v-if="activeName == '2'" :id="formInline.deviceId" />
      </el-tab-pane>
      <el-tab-pane label="设备位置" name="3">
        <equipmentLocation v-if="activeName == '3'" :formInline="formInline" :id="formInline.deviceId" />
      </el-tab-pane>
      <el-tab-pane label="通知记录" name="4">
        <notificationRecord v-if="activeName == '4'" :id="id" />
      </el-tab-pane>
    </el-tabs>
    <div class="pt-[20px] flex justify-end absolute bottom-0 right-0"  v-if="formInline?.dealStatus == -1 && isshowchul">
      <el-button type="primary" @click="alarmchul">告警处理</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getInfo as getAlarmInfo } from '@/api/screen/alarm/index'
import { ref } from "vue";
import alarminformation from "./components/alarm-information.vue";
import surveillanceVideo from "./components/surveillance-video.vue";
import equipmentLocation from "./components/equipment-location.vue";
import notificationRecord from "./components/notification-record.vue";
import infochul from "./info.vue";
import { addDialog } from "@/components/ReDialog";
import { getAlarmHandle } from "@/api/screen/index"
import { ElMessage, } from "element-plus";
import { deviceDetection, } from "@pureadmin/utils";
import { message } from "@/utils/message";
const activeName = ref("1");
const isshowchul = ref(true);
const props = defineProps({
  id: {
    type: String,
    default: ""
  },
  formInline: {
    type: Object,
    default: () => { }
  },
  isLoading: {
    type: Boolean,
    default: false
  }
});
const defour = () => {
  return {
    id: props.formInline?.id,
    confirm: null,
    dealStatus: null,
    dealView: null,
    sellMethod: null,
    processId: null,
    handleUid: null,
    noticeType: []
  };
};
const formRef = ref();
const alarmchul = () => {
  addDialog({
    title: `告警处理`,
    width: "400px",
    draggable: true,
    fullscreen: false,
    fullscreenIcon: true,
    props: {
      id: props.formInline?.id,
      projectId: props.formInline?.projectId
    },
    closeOnClickModal: false,
    contentRenderer: () => h(infochul, { ref: formRef }),
    openAutoFocus({ options, index }) {
      options.props = {
        isLoading: true,
        id: props.formInline?.id,
        projectId: props.formInline?.projectId,
        formInlines: defour()
      };
      options.props.isloading = false;
    },
    beforeSure: (done, { options }) => {
      const FormRefsa = formRef.value.getRef();
      const formData = options.props.formInlines;
      function chores() {
        message(`操作成功`, {
          type: "success"
        });
        done(); // 关闭弹框
      }
      console.log("formData", formData);

      FormRefsa.validate(valid => {
        if (valid) {
          getAlarmHandle(formData)
            .then(res => {
              if (res.code == 200) {
                ElMessage.success(res.msg)
                isalarmchul()
                done()
              }
            })
            .catch(err => {
              if (err !== "请求中") {
                options.props.isLoading = false;
              }
            });
        }
      });
    }
  });
};
function isalarmchul() {
  getAlarmInfo({ id: props.id }).then(res => {
    if (res.code == 200) {
      if (res.result.dealStatus !== -1) {
        isshowchul.value = false;
      }
    }
  });
}
</script>
